Show-Hide Layers

The Show-Hide Layers action shows, hides, or restores the default visibility of one or more layers. This action is useful for showing information as the user interacts with the page. For example, as the user rolls the mouse pointer over an image of a plant, you could show a layer that gives details about the plant's growing season and region, how much sun it needs, how large it can grow, and so on.

Show-Hide Layers is also useful for creating a preload layer—that is, a large layer that obscures the contents of the page at first and then disappears when all the page components have finished loading.

To use the Show-Hide Layers action:

1 Choose Insert > Layer or click the Layer button on the Object palette, and draw a layer in the Document window.
Repeat this step to create additional layers.
2 Click in the Document window to deselect the layer, then open the Behavior inspector.
3 Click the plus (+) button and choose Show-Hide Layers from the Actions pop-up menu.
If Show-Hide Layers is unavailable, you probably have a layer selected. Because layers do not accept events in both 4.0 browsers, you must select a different object—such as the BODY tag or a link (A tag)—or change the target browser to IE 4.0 in the Events For pop-up menu.
4 From the Named Layers list, select the layer whose visibility you want to change.
5 Click Show to show the layer, Hide to hide the layer, or Default to restore the layer's default visibility.
6 Repeat steps 4 and 5 for all remaining layers whose visibility you want to change at this time.
7 Click OK.
8 Check that the default event is the one you want.
If it isn't, choose another event from the pop-up menu. If the events you want are not listed, change the target browser in the Events For pop-up menu.

When viewed in a Netscape Navigator browser window, layers may shrink to fit the content. To keep this from happening, add text or images to layers, or set layer clip values.

To create a preload layer:

1 Click the Layer button on the Object palette and draw a large layer in the Document window.
Be sure the layer covers all the content on the page.
2 In the Layer palette, drag the layer name to the top of the list of layers to specify that the layer should be at the front of the stacking order.
3 Name the layer loading in the leftmost text field in the Property inspector.
4 With the layer still selected, set the background color of the layer to the same color as the page background in the Property inspector.
5 Click inside the layer (which should now be obscuring the rest of the page contents) and type a message, if desired.
For example, "Please wait while the page loads" or "Loading..." are messages that tell users what is happening so that they know the page contains content.
6 Click the <body> tag in the tag selector in the bottom left corner of the Document window.
7 In the Behavior inspector, choose Show-Hide Layers from the Actions pop-up menu.
8 Select the layer called loading from the Named Layers list.
9 Click Hide.
10 Click OK.